<template>
  <el-card header="填报人">
    <leftRightSplit :left-span="4">
      <el-card slot="left">
        <div slot="header">
          <span>所在公司部门</span>
        </div>
        <unitDeptTree
          ref="deptTree"
          @load="chioseDept"
          @change="chioseDept"
        />
      </el-card>
      <el-card slot="right">
        <div slot="header">
          <span>{{ title }}</span>
        </div>
        <el-row>
          <el-form :inline="true" :model="queryParam">
            <el-form-item label="关键字">
              <el-input
                v-model="queryParam.QueryKey"
                placeholder="人员名\编号"
                @change="load"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <w-table
          :data="emps"
          :columns="columns"
          :is-paging="true"
          row-key="EmpId"
          :paging="paging"
          @load="load"
        >
          <template slot="UserType" slot-scope="e">
            {{ HrUserType[e.row.UserType].text }}
          </template>
          <template slot="empBase" slot-scope="e">
            <div class="userInfo">
              <div class="head">
                <img
                  v-if="e.row.UserHead == null || e.row.UserHead == ''"
                  src="/image/defhead.png"
                  width="50"
                  height="50"
                >
                <el-avatar
                  v-else
                  shape="square"
                  :size="50"
                  :src="e.row.UserHead | imageUri"
                />
              </div>
              <div class="content">
                <div class="item">
                  <i
                    v-if="e.row.Sex == 1"
                    style="color: #409eff"
                    class="el-icon-male"
                  />
                  <i
                    v-else-if="e.row.Sex == 2"
                    style="color: #f56c6c"
                    class="el-icon-female"
                  />
                  <el-link @click="showEmp(e.row.EmpId)">{{ e.row.EmpName }}</el-link>
                </div>
                <div class="empNo">{{ e.row.EmpNo }}</div>
              </div>
            </div>
          </template>
          <template slot="empTitle" slot-scope="e">
            <template v-if="e.row.EntryTitle">
              {{ e.row.EntryTitle.Name }}
              <el-tooltip
                v-if="e.row.Title && e.row.Title.length > 0"
                effect="dark"
                placement="bottom"
              >
                <div slot="content">
                  <p v-for="(t, index) in e.row.Title" :key="index">
                    {{ t.Show }}
                  </p>
                </div>
                <i class="el-icon-more" />
              </el-tooltip>
            </template>
            <template v-else-if="e.row.Title && e.row.Title.length > 0">
              {{ e.row.Title[0].Show }}
              <el-tooltip
                v-if="e.row.Title.length > 1"
                effect="dark"
                placement="bottom"
              >
                <div slot="content">
                  <p v-for="(t, index) in e.row.Title" :key="index">
                    {{ t.Show }}
                  </p>
                </div>
                <i class="el-icon-more" />
              </el-tooltip>
            </template>
          </template>
          <template slot="empPost" slot-scope="e">
            <template v-if="e.row.EntryPost">
              {{ e.row.EntryPost.Name }}
              <el-tooltip
                v-if="e.row.Post && e.row.Post.length > 0"
                effect="dark"
                placement="bottom"
              >
                <div slot="content">
                  <p v-for="(t, index) in e.row.Post" :key="index">
                    {{ t.Show }}
                  </p>
                </div>
                <i class="el-icon-more" />
              </el-tooltip>
            </template>
            <template v-else-if="e.row.Post && e.row.Post.length > 0">
              {{ e.row.Post[0].Show }}
              <el-tooltip
                v-if="e.row.Post.length > 1"
                effect="dark"
                placement="bottom"
              >
                <div slot="content">
                  <p v-for="(t, index) in e.row.Post" :key="index">
                    {{ t.Show }}
                  </p>
                </div>
                <i class="el-icon-more" />
              </el-tooltip>
            </template>
          </template>
          <template slot="unit" slot-scope="e">
            {{ e.row.UnitName + " " + e.row.DeptName }}
          </template>
        </w-table>
      </el-card>
    </leftRightSplit>
    <empModel
      :id="empId"
      :visible="empVisible"
      @close="empVisible=false"
    />
  </el-card>
</template>

<script>
import unitDeptTree from '@/components/unit/unitDeptTree.vue'
import * as fillItemApi from '@/OA/api/fillInItem'
import empModel from '@/components/emp/empModel.vue'
import {
  HrUserType
} from '@/config/publicDic'
export default {
  components: {
    unitDeptTree,
    empModel
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      HrUserType,
      emps: [],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'EmpId',
        IsDesc: false,
        Total: 0
      },
      title: null,
      empVisible: false,
      empId: null,
      queryParam: {
        FillInId: null,
        QueryKey: null,
        UnitId: null,
        DeptId: null
      },
      columns: [
        {
          key: 'EmpId',
          title: '人员信息',
          align: 'left',
          width: 250,
          fixed: 'left',
          slotName: 'empBase',
          sortable: 'custom'
        },
        {
          key: 'Dept',
          title: '单位部门',
          align: 'center',
          minWidth: 180
        },
        {
          key: 'Post',
          title: '当前岗位',
          align: 'center',
          slotName: 'empPost',
          minWidth: 200
        },
        {
          key: 'DeptTitle',
          title: '当前职务',
          align: 'center',
          slotName: 'empTitle',
          minWidth: 150
        },
        {
          key: 'Phone',
          title: '手机号',
          align: 'center',
          width: 110,
          sortable: 'custom'
        },
        {
          key: 'UserType',
          title: '人员类型',
          align: 'center',
          sortable: 'custom',
          slotName: 'UserType',
          minWidth: 110
        }
      ]
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    showEmp(empId) {
      this.empId = empId
      this.empVisible = true
    },
    reset() {
      this.queryParam.FillInId = this.id
      this.queryParam.QueryKey = null
      this.queryParam.UnitId = null
      this.queryParam.DeptId = null
      this.paging.index = 1
      this.load()
    },
    chioseDept(e) {
      if (e.value.length === 0) {
        this.queryParam.UnitId = null
        this.queryParam.DeptId = null
        this.title = e.comName[e.companyId] + '公司-人员列表'
      } else {
        const dept = e.value[0]
        if (dept.type === 'unit') {
          this.title = dept.Name + '单位-人员列表'
          this.queryParam.UnitId = dept.Id
          this.queryParam.DeptId = null
        } else {
          this.title = dept.Name + '部门-人员列表'
          this.queryParam.UnitId = null
          this.queryParam.DeptId = dept.Id
        }
      }
      this.load()
    },
    async load() {
      if (this.queryParam.FillInId == null) {
        return
      }
      const res = await fillItemApi.query(this.queryParam, this.paging)
      if (res.List) {
        this.emps = res.List
      } else {
        this.emps = []
      }
      this.paging.Total = res.Count
    }
  }
}
</script>

<style scoped>
@import '/css/user.css';
</style>
